<template>
  <div class="article-detail">
    <div class="container">
      <div class="header">
        <div class="header-back">
          <img src="@/assets/img/logo.png" alt="">
        </div>
        <div class="header-title">
          <p class="title-h1">新华新消费</p>
          <p class="title-txt">新消费看新华</p>
        </div>
      </div>
      <div class="content">
        <div class="content-title">{{ form.title }}</div>
        <div class="content-info">
          <div class="content-original">{{ form.sourceType===2?"转载":'原创' }}</div>
          <div class="content-author">{{ form.author }}</div>
          <div class="content-time">{{ formatDateTime(form.publishDate) }}</div>
        </div>
        <div class="content-html" v-html="form.contentHtml"></div>
      </div>

      <div class="container-extra">
        <p>未经授权，不得转载</p>
        <p>违法不良信息举报电话:(025) 5868 3711</p>
      </div>

      <div class="comment-box" @click="handleCommentBoxClick">
        您可以在新华新消费客户端写下评论
        <i class="fa fa-angle-right" style="position: relative; top: 1px" data-v-35d7ade3=""></i>
      </div>
    </div>


  </div>
</template>
<script>
import {getArticleDetail} from '@/api/article'
import '@/utils/rem'
import {initWechatSDK} from '@/utils/wechat'

export default {
  name: 'ArticleDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false,
      contentId: this.$route.params.id || null,
      form: {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      if (!this.contentId) {
        return
      }
      let data = await getArticleDetail({contentId: this.contentId})
      this.form = data.data
      console.log(this.form)
      await this.initWechatShare()
    },

    async initWechatShare() {
      try {
        await initWechatSDK({
          shareConfig: {
            title: this.form.title,
            desc: '新华新消费',
            link: window.location.href,
            imgUrl: 'https://xinxf.oss-cn-hangzhou.aliyuncs.com/resources/logo.png'
          }
        })
        console.log('微信分享功能已初始化')
      } catch (error) {
        console.error('初始化微信分享失败:', error)
      }
    },
    formatDateTime(inputDateTime) {
      const date = new Date(inputDateTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
      const day = String(date.getDate()).padStart(2, '0'); // 补零
      const hours = String(date.getHours()).padStart(2, '0'); // 补零
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零

      return `${year}年${month}月${day}日 ${hours}:${minutes}`;
    },
    isIOS() {
      const ua = window.navigator.userAgent;
      return /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
    },
    handleCommentBoxClick(){


      if (this.isIOS()) {
        // 替换为你自己的 App Store 链接
        window.location.href = 'https://apps.apple.com/cn/app/%E6%96%B0%E5%8D%8E%E6%96%B0%E6%B6%88%E8%B4%B9/id6746319357';
      }
    }
  }
}

</script>
<style scoped lang="scss">
.container {
  .header {
    padding: 15px;
    top: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 9;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    border-bottom: 1px solid #eaeaea;

    img {
      display: block;
      width: 40px;
      height: 40px;
    }

    .header-back, .header-title {
      float: left;
      text-align: left;
    }

    .header-title {
      margin-left: 10px;
    }

    .title-h1 {
      font-size: 16px;
      color: #333;
    }

    .title-txt {
      color: #b6b3b7;
      font-size: 12px;
    }

  }

  max-width: 677px;
  margin: 0 auto;
  padding-bottom: 50px;

  .content {
    margin-top: 70px;
    padding: 10px 14px 14px; // 原 0.2rem -> 20px, 0.28rem -> 28px

    .content-title {
      font-weight: bold;
      font-size: 24px; // 原 0.48rem
      line-height: 24px; // 原 0.46rem
      color: #333333;
      margin-bottom: 15px; // 原 0.28rem
    }

    .content-info {
      display: flex;
      align-items: center;
      //line-height: 40px; // 原 0.40rem
      margin-bottom: 10px; // 原 0.20rem
      font-size: 12px;

      .content-author {
        color: #333333;
        line-height: 24px;
        margin-right: 16px; // 原 0.16rem
      }
      .content-original {
        padding: 0 5px;
        height: 24px;
        line-height: 24px;
        background: #F3F5FB;
        border-radius: 2px;
        text-align: center;
        color: #666666;
        margin-right: 15px;
      }
      .content-time {
        color: #999999;
      }
    }
  }

  .content-html {
    ::v-deep {
      img {
        max-width: 100% !important;
        height: auto !important;
      }

      p {
        font-size: 13px; // 原 26rem（注意：这里可能是误写，应为 0.26rem）
        line-height: 24px; // 原 48rem（同上）
        color: #333333;
        text-align: justify;
      }
    }
  }

  .container-extra {
    color: #999;
    font-size: 14px;
    text-align: center;
    line-height: 22px;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .comment-box {
    //margin-top: .2rem;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    cursor: pointer;
    color: #0098ff;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    //padding-bottom: 50px;

  }

}

</style>